<template>
	<view class="bg-gray">
		<!-- 第一部分-->
		<view class="flex justify-between align-center bg-white content1">
			<!--积分-->
			<view>
				<view class="cu-capsule round flex justify-between" @tap="showModal" data-target="bottomModal">
					<view class='cu-tag bg-gradual-red '>
						积分
					</view>
					<!--积分数值-->
					<view class="cu-tag line-red">
						{{credit.credit}}
					</view>
					<!--积分数值-->
				</view>
			</view>
			<!--积分-->
			<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action text-blue" @tap="hideModal">取消</view>
						<view class="action text-green" @tap="exchange">确定</view>
					</view>
					<view class="padding-xl">
						<view>
							<text>积分兑换金币(10:1)</text>
						</view>
						<view class="flex justify-between">
							<button class="align-center" @click="Decrease">-</button>
							<text class="align-center" style="font-size: 150%;">{{num}}</text>
							<button class="line-green align-center" @click="Increase">+</button>
						</view>
					</view>
				</view>
			</view>
			<!--头像、昵称、id-->
			<view>
				<!--头像-->
				<view @tap="gosetting()" class="flex justify-center round">
					<image class="user-logo" :src='user.avatarurl'></image>
				</view>
				<!--头像-->
				<!--昵称-->
				<view class="flex justify-center user-name">
					<text>{{user.nickname}}</text>
				</view>
				<!--昵称-->
				<!--id-->
				<view class="cu-tag round user-id">
					<text>{{user.id}}</text>
				</view>
				<!--id-->
			</view>
			<!--头像、昵称、id-->

			<!--金币-->
			<view>
				<view class="cu-capsule round ">
					<view class='cu-tag bg-gradual-orange'>
						<!--钱包图标-->
						<text class='cuIcon-moneybag'></text>
					</view>
					<!--金币数值-->
					<view class="cu-tag line-yellow">
						{{credit.gold}}
					</view>
					<!--金币数值-->
				</view>
			</view>
			<!--金币-->
		</view>
		<!--第一部分-->

		<!--第二部分-->
		<!--标头-->
		<view class="bg-white activate" style="border-bottom: 0.1upx solid #e7e7e7;border-top: 0.5upx solid #e7e7e7;;">
			<view style="display: flex;align-items: center;">
				<text style="margin-right: 5upx;color: #feb2b2;" class="cuIcon-title line-red"></text>
				<text style="font-weight: bold;font-size: 110%;">我的服务</text>
			</view>
			<view class="text-gray">
				<button class="cu-btn lines-olive sm round" @click="myShare">推广</button>
			</view>
		</view>
		<!--标头-->
		<!--服务列表-->
		<view class="cu-list grid col-3 border" style="border-bottom: #EEEEEE solid 0.5upx;">
			<view @tap="gopage(i)" style="position: relative;" class="flex align-center flex-direction cu-item" v-for="(p,i) in orders"
			 :key="i" v-if="i<3*3">
				<view :class="p.icon" style="color: #feb2b2;">
					<view class="cu-tag badge" v-if="p.num!=0">
						<block v-if="p.num!=0">{{p.num>99?'99+':p.num}}</block>
					</view>
				</view>
				<view style="margin-bottom: 20upx;">
					{{p.test}}
				</view>
			</view>

		</view>
		<!--服务列表-->
		<!--第二部分-->

	</view>
</template>

<script>
	import {
		uniSegmentedControl
	} from "@dcloudio/uni-ui";
	import {
		uniIcons
	} from "@dcloudio/uni-ui";
	import {
		uniFab
	} from "@dcloudio/uni-ui";
	import fabBtn from "@/component/fabBtn";
	export default {
		components: {
			uniSegmentedControl,
			uniIcons,
			uniFab,
			fabBtn
		},
		methods: {
			//设置页跳转
			gosetting() {
				uni.navigateTo({
					url: "./mine-setting/mine-setting"
				});
			},
			//服务页面跳转
			gopage(item) {
				//console.log(item);
				var url = this.orders[item].url;
				uni.switchTab({
					url: url,
					fail: (res) => {
						uni.navigateTo({
							url: url,
						});
					}
				});
			},
			//底部窗口
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.credit.credit += this.num * 10;
				this.num = 0;
				this.i = 0;
				this.modalName = null;
			},

			Decrease(e) {
				if (this.num != 0) {
					this.num -= 1;
					this.credit.credit += 10;
				}
			},
			Increase(e) {
				var i = this.credit.credit / 10;
				//console.log(i);
				i = Math.floor(i);
				if (this.i < i) {
					this.i = i;
				}
				if (this.num < this.i) {
					this.num += 1;
					this.credit.credit -= 10;
				}
			},
			exchange(e) {
				var num = this.num;
				//this.user.credit-=100*num;
				this.user.goldcoin += num;
				this.changeCredit(num * 10);
				this.num = 0;
				this.i = 0;
				this.modalName = null;
			},
			myShare() {
				uni.navigateTo({
					url: "../../pagesA/share/share?uid=" +
						uni.getStorageSync("user").id
				});
			},
			getMyMoney() {
				this.request({
					url: this.apiServer +
						"/credit/findMyCreditByUserId?uId=" +
						uni.getStorageSync("user").id
				}).then(res => {
					this.credit = res.data;
				})
			},
			changeCredit(e) {
				console.log(e);
				this.request({
					url: this.apiServer + '/credit/updateCredit',
					method: 'PUT',
					data: {
						"credit": e,
						"uId": uni.getStorageSync("user").id,
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
				}).then(res => {
					console.log(res);
					this.getMyMoney();
				})
			},
			getUser() {
				this.request({
					url: this.apiServer + "/user/findUserById?id=" +
						uni.getStorageSync("user").id
				}).then(res => {
					this.user = res.data;
					uni.setStorageSync("user", res.data);
				})
			}
		},
		onShow() {
			this.getUser();
		},
		onLoad() {
			this.getUser();
			this.getMyMoney();
		},
		data() {
			return {
				i: 0,
				num: 0,
				modalName: null,
				//服务列表
				//test：服务名称
				//icon：图标
				//num：新消息数
				//id：下标
				//url：跳转链接
				orders: [{
						test: "金币商城",
						icon: "cuIcon-shopfill",
						num: 0,
						id: 1,
						url: "/pagesA/shop/index"
					},
					{
						test: "我的打卡",
						icon: "cuIcon-picfill",
						num: 1,
						id: 3,
						url: "/pages/clockIn/mineClockIn/index"
					},
					{
						test: "我的关注",
						icon: "cuIcon-like",
						num: 2,
						id: 3,
						url: "./mine-like/mine-like"
					},
					{
						test: "操作记录",
						icon: "cuIcon-upstage",
						num: 0,
						id: 4,
						url: "./mine-Record/index"
					},
					{
						test: "我的班级",
						icon: "cuIcon-group",
						num: 0,
						id: 5,
						url: "/pagesA/class/index"
					},
					{
						test: "我的课程",
						icon: "cuIcon-font",
						num: 0,
						id: 6,
						url: "/pages/courses/index"
					},
					{
						test: "拼团",
						icon: "cuIcon-font",
						num: 0,
						id: 3,
						url: "/pagesA/collage/index"
					},
				],
				user: {},
				credit: {}
			};
		}
	};
</script>

<style lang="scss" scoped>
	.user-goldcoin {
		display: flex;
		align-items: center;
	}

	.user-id {
		display: flex;
		align-items: center;
	}

	.user-credit {
		font-size: 100%;
		font-weight: bold;
	}

	.user-name {
		font-size: 150%;
		font-weight: bold;

	}

	.content1 {
		padding: 30upx 30upx 30upx 30upx;

	}

	.user-logo {
		width: 160rpx;
		height: 160rpx;
		display: block;
		overflow: hidden;
		border-radius: 50%;
		margin: 40rpx auto;
	}

	.activate {
		display: flex;
		justify-content: space-between;
		height: 90upx;
		align-items: center;
		padding-left: 20upx;
		padding-right: 20upx;
	}
</style>
